<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../css/layui.css">
	<title>生成名字</title>
</head>
<style>
	.name-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 90%;
	}
	
	.name-nm {
		font-size: 2em;
		font-weight: 600;
		color: #7bcfa6;
	}
	
	.name-summy,
	.name-book,
	.name-author {
		margin-top: 6px;
	}
	
	.name-summy {
		color: #ff7500;
		border-bottom: #177cb0 1px dashed;
	}
	
	.name-book {
		color: #b25d25;
	}
	
	.name-author {
		color: #b25d25;
	}
</style>
<script src="../layui.js"></script>
<script src="../js/gunamer.js"></script>
<script src="../js/jquery.min.js"></script>

<body>
	<div class="layui-container">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>生成名字</legend>
		</fieldset>
		<div class="layui-row">
			<form class="layui-form" lay-filter="radches" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">姓</label>
					<div class="layui-input-inline">
						<input type="text" name="ftname" value="周" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">选择</label>
					<div class="layui-input-block">
						<input type="radio" name="bk" value="shijing" title="诗经" checked>
						<input type="radio" name="bk" value="chuci" title="楚辞">
						<input type="radio" name="bk" value="tangshi" title="唐诗">
						<input type="radio" name="bk" value="songci" title="宋词">
						<input type="radio" name="bk" value="yuefu" title="乐府">
						<input type="radio" name="bk" value="gushi" title="古诗">
						<input type="radio" name="bk" value="cifu" title="辞赋">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn layui-btn-normal" id="radcnbtn">确定</button>
					</div>
				</div>
			</form>
			<div class="layui-row">
				<div class="layui-col-md8">
					<div class="layui-panel">
						<div style="padding: 30px;" id="seeches">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
<script>
	// function filtername(str1, str2) {
    //     let s = str1.split("").filter(function (x) {
    //         return str2.split("").indexOf(x) === -1;
    //     }).join("");
    //     return s
    // }


    var seechcn = document.querySelector("#seeches");
    layui.use(['form', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer;

        layui.$('#radcnbtn').on('click', function () {
            var chdata = form.val('radches');
            seechcn.innerHTML = "";
            if (chdata['ftname']) {
                var famname = chdata['ftname'];
                const namer = new Namer();
                if (chdata['bk'] == "shijing") {
                    namer.loadBook("shijing", famname);
                }
                if (chdata['bk'] == "chuci") {
                    namer.loadBook("chuci", famname);
                }
                if (chdata['bk'] == "tangshi") {
                    namer.loadBook("tangshi", famname);
                }
                if (chdata['bk'] == "songci") {
                    namer.loadBook("songci", famname);
                }
                if (chdata['bk'] == "yuefu") {
                    namer.loadBook("yuefu", famname);
                }
                if (chdata['bk'] == "gushi") {
                    namer.loadBook("gushi", famname);
                }
                if (chdata['bk'] == "cifu") {
                    namer.loadBook("cifu", famname);
                }


            } else {
                layer.alert('请输入姓！', { icon: 5 });
            }
        })



    });

</script>

</html>